﻿@import "common/globalvar.less";

@header-heigth: 30px;
@left-tabs-heigth: 30px;
@left-pane-width: 250px;
@collapse-btn-heigth: 30px;

body {
    margin: 0;
    padding: @header-heigth 0 0 @left-pane-width;
    background-color: @content-back-color;
    color: @content-fore-color;
    font-family: @default-font-family;
    font-size: @form-font-size;
}

.main-shell a,
.main-shell a:active,
.main-shell a:focus,
.main-shell a:hover,
.main-shell a:visited {
    color: inherit;
    outline: 0;
    text-decoration: none;
}

/* Header */

#divMainHeader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    min-width: 300px;
    height: @header-heigth;
    margin: 0;
    padding: 0 10px;
    background-color: @menu-back-color;
    color: @menu-fore-color;
    line-height: @header-heigth;
}

#divMainHeader .hdr-btn {
    height: @header-heigth;
    margin: 0 0 0 5px;
    padding: 0 10px;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

#divMainHeader .hdr-btn:hover {
    background-color: @menu-item-hover-back-color;
    color: @menu-item-hover-fore-color;
    text-decoration: none;
}

#divMainHeader .txt-btn {
    color: @menu-fore-color;
}

#divMainHeader .img-btn {
    color: @menu-fore-color-dark;
}

#divMainHeader .img-btn .glyphicon {
    position: relative;
    top: 2px;
}

#divMainHeader #spanMainShowMenuBtn {
    margin: 0 5px 0 -10px;
    font-size: 15px;
    display: none; /*inline-block*/
}

#spanMainAppName {
    display: inline-block;
    line-height: @header-heigth - 1px;
    font-size: 17px;
    white-space: nowrap;
}

#divMainUserMenu {
    float: right;
    height: @header-heigth;
    display: inline-block;
}

#lblMainNormalViewBtn {
    position: fixed;
    top: 0;
    right: 0;
    height: @header-heigth;
    padding: 0 10px;
    background-color: @menu-back-color-air;
    display: none; /*inline-block*/
    line-height: @header-heigth;
    opacity: 0.5;
    cursor: pointer;
    color: @menu-fore-color-dark;
    font-size: 13px;
}

#lblMainNormalViewBtn:hover {
    color: @menu-item-hover-fore-color;
    opacity: 1;
}

/* Left Pane */

#divMainLeftPane {
    position: fixed;
    left: 0;
    top: @header-heigth;
    width: @left-pane-width;
    min-height: 200px;
    background-color: @menu-back-color;
    color: @menu-fore-color;
    font-size: 14px;
    overflow: hidden;
}

#divMainLeftPane .tool-window {
    height: calc(~"100% - "@collapse-btn-heigth);
    margin: 0 0 0 @left-tabs-heigth;
    padding: 5px 0 0 0;
    display: none; /*block*/
    overflow-x: hidden;
    overflow-y: auto;
}

#divMainTabs {
    position: absolute;
    left: @left-tabs-heigth;
    top: 0;
    height: @left-tabs-heigth;
    min-width: 200px;
    background-color: @menu-item-hover-back-color;
    overflow: hidden;
    transform: rotate(90deg);
    transform-origin: left top 0;
}

#divMainTabs .tab {
    margin: 0 0 0 5px;
    padding: 0 10px;
    color: @menu-fore-color-dark;
    display: inline-block;
    line-height: @left-tabs-heigth;
    white-space: nowrap;
}

#divMainTabs .tab.selected {
    color: @menu-fore-color;
}

#divMainTabs .tab:hover {
    color: @menu-item-hover-fore-color;
    cursor: pointer;
}

/* Tree views */

#divMainLeftPane .tree-view .node:hover {
    background-color: @menu-item-hover-back-color-dark;
    color: @menu-item-hover-fore-color;
}

#divMainLeftPane .tree-view .node.selected {
    background-color: @menu-item-selected-back-color;
    color: @menu-item-selected-fore-color;
}

#divMainLeftPane .tree-view .node.disabled {
    cursor: not-allowed;
    color: @menu-fore-color-dark;
}

#divMainLeftPane .tree-view .expander::before {
    font-size: 10px;
}

/* Main Menu */

#divMainMenu .node[data-level="1"],
#divMainMenu .node[data-level="2"],
#divMainMenu .node[data-level="3"],
#divMainMenu .node[data-level="4"],
#divMainMenu .node[data-level="5"] {
    color: @menu-fore-color-dark;
    font-size: 13px;
}

#divMainMenu .tree-view .node {
    padding: 5px 10px;
}

#divMainMenu .tree-view .expander.left {
    display: none;
    width: 0;
}

#divMainMenu .tree-view .expander.right {
    display: table-cell;
    width: 20px;
}

/* Explorer */

#divMainExplorer {
    font-size: 13px;
    line-height: 13px;
}

#divMainExplorer .tree-view .node {
    padding: 3px 5px 3px 10px;
}

#divMainExplorer .tree-view .expander {
    padding: 4px 0 0 0;
}

#divMainExplorer .tree-view .icon {
    width: 21px;
    min-width: 21px;
}

#divMainExplorer .tree-view img {
    position: relative;
    top: -2px;
}

/* Collapse Left Pane */

#divMainCollapseLeftPaneBtn {
    position: absolute;
    bottom: 0;
    width: @left-pane-width - @left-tabs-heigth;
    height: @collapse-btn-heigth;
    margin: 0 0 0 @left-tabs-heigth;
    padding: 0px 10px;
    color: @menu-fore-color-dark;
    cursor: pointer;
    font-size: 13px;
    line-height: @collapse-btn-heigth;
}

#divMainCollapseLeftPaneBtn i {
    margin-right: 10px;
    font-size: 19px;
    position: relative;
    top: 2px;
}

#divMainCollapseLeftPaneBtn:hover {
    color: @menu-item-hover-fore-color;
}

#divMainContent {
    overflow: auto;
}

/* Stats */
#frameStats {
    width: 0;
    height: 0;
    border: none;
    position: fixed;
    visibility: hidden;
}